<template>
	<div :class="className" :style="{height:height,width:width}" />
</template>

<script>
	import echarts from 'echarts'
	require('echarts/theme/macarons') // echarts theme
	import { debounce } from '@/utils'

	const animationDuration = 6000

	export default {
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '350px'
			}
		},
		data() {
			return {
				chart: null
			}
		},
		mounted() {
			this.initChart()
			this.__resizeHandler = debounce(() => {
				if(this.chart) {
					this.chart.resize()
				}
			}, 100)
			window.addEventListener('resize', this.__resizeHandler)
		},
		beforeDestroy() {
			if(!this.chart) {
				return
			}
			window.removeEventListener('resize', this.__resizeHandler)
			this.chart.dispose()
			this.chart = null
		},
		methods: {
			initChart() {
				this.chart = echarts.init(this.$el, 'macarons')

				this.chart.setOption({
					legend: {},
					tooltip: {},
					dataset: {
						source: [
							['product', '订货数量', '发货数量', '收货数量'],
							['星期一', 43.3, 85.8, 93.7],
							['星期二', 83.1, 73.4, 55.1],
							['星期三', 86.4, 65.2, 82.5],
							['星期四', 72.4, 53.9, 39.1],
							['星期五', 43.3, 85.8, 93.7],
							['星期六', 83.1, 73.4, 55.1],
							['星期天', 86.4, 65.2, 82.5]
						]
					},
					xAxis: {
						type: 'category'
					},
					yAxis: {},
					// Declare several bar series, each will be mapped
					// to a column of dataset.source by default.
					series: [{
							type: 'bar'
						},
						{
							type: 'bar'
						},
						{
							type: 'bar'
						}
					]
				})
			}
		}
	}
</script>